import React, { useMemo, useRef } from "react";
import { Checkbox } from "antd";
import { useFormField } from "../../context/form-context";
import { useForm } from "../../context/metadata-context";
import get from "lodash/get";
import set from "lodash/set";
import useComponentWidth from "../../lifecycle/useComponentWidth";
import eventBus from "../../eventBus";

/**   
 * CheckBox字段默认配置
*/
let defaultConfig = {
  //这一批属性来源 tplData.form.data_control （步骤权限）
  //"code": "a18",
  // "name": "复选框固定值",
  // "type": "checkbox_group",
  // "is_show": true,
  // "is_editable": true,
  // "is_required": false,

  //这一批属性来源 tplData.form.form_meta_data （表单设计器）
  // "designProps": {
  //   "code": "a18",
  //   "name": "复选框固定值",
  //   "ui": "wfd_check",
  //   "title": "复选框固定值",
  //   "layout": "control_layout_leftRight",
  //   "groupTitle": "",
  //   "byTableGroupTitle": false,
  //   "defaultValue": "",
  //   "title_w": 85
  // },
  // "isUsed": false,

  //这一批属性来源 tplData.form.data_define （业务对象）
  // "show_type": "",
  // "show_type_name": "",
  // "props": {
  //   "source_type": "fixd_value",//数据源类型，sql数据库直连，api API接口，fixd_value固定值
  //   "configs": [
  //     [
  //       0,
  //       "复选框显示值1",
  //       "说明1",
  //       "复选框固定值1"
  //     ],
  //     [
  //       0,
  //       "复选框显示值2",
  //       "说明2",
  //       "复选框固定值2"
  //     ]
  //   ],//固定值模式时，复选框的选项，格式为数组，格式[默认选中0或者1 , 显示值 , 说明文本 , 实际值]
    //"configs": "http://www.baidu.com"//api模式
    //"configs": "select [a1] as text"//数据库直连模式
  // },
  // "type_name": "复选框",
  
  // //来源 tplData.form.defaultValueConf
  // "default": null
}


export default function ({
  field,
  label,
  rules,
  filter,
  onChange,
  displayComponent,
  options = [],
  required,
  loadDataOnMounted = true,
  showLabel = false,
  readOnly = false,
  isSubTableField,
  rangePath,
  sourcePath,
  displayFormatter,
  valueFormatter,
  cell,
  rowIndex,
  groupCode,
  ...others
}) {
  const { data: tplData } = useForm().root;
  const { input, property, validation, readonly, className, isDisplay } = useFormField({
    field,
    rules,
    onChange,
    displayFormatter,
    valueFormatter,
    triggerBlurAsChange:true
  });

  let wrapperRef=useRef();
  let width=useComponentWidth(wrapperRef)
  
  //异常值处理
  if (Array.isArray(input.value)) {
    let value = null;
    if(Array.isArray(input.value[0])){
      //checkbox从索引1里面取
      value =[];
      input.value.forEach((v) => {
        if(v[0] == 1){
          if(v[1] === undefined || v[1] === null){//兼容异常数据
            console.warn("checkbox后端提供的数据异常，字段code为：" + field)
          }else{
            value.push(v[1]);
          }
        }
      });
      value = value.join(",");
      if(value === ""){//兼容异常数据，如果给的数据没选中项，CheckBox的value设置为null，保持统一
        value = null;
      }
    }else if(input.value[0] === undefined){
      //联动后，后端返回的联动结果可能是个[], input.value[0]是没有值的，这种情况把value重置为null，然后再触发一次change事件
      value = null;
      input.value = [];
    }

    //更新选项
    set(tplData, rangePath, input.value);
    set(tplData, sourcePath, input.value);

    //更新说明文字
    let remarkPath = "refreshRemarkTip.form.data_range.main." + cell.code;
    if(isSubTableField) {
      remarkPath = "refreshRemarkTip.form.data_range.children." + groupCode + "." + cell.code;
    }
    eventBus.publishAsync(remarkPath);

    input.onChange(value);
    return null;
  }

  //复选框后端忽略了value值，全部用的是text当作值
  if (isDisplay) {
    //如果值是数组，转换成字符串显示
    if(Array.isArray(input.value)){
      return input.value.join(",")
    }
    //返回下拉的只读文本
    return input.value === undefined ? null : input.value;
  }

  let optionData = get(tplData, rangePath); //查找固定值配置
  if (!optionData) {
    optionData = get(tplData, sourcePath); //查找关键字链接配置
  }
  if (!optionData) {
    return null;
  }
  let inputValue = input.value;
  if (typeof inputValue === "string" || inputValue instanceof String) {
    inputValue = inputValue?.split(",");
  }
  let component = <Checkbox.Group className={className} style={{width:"100%"}}
                    {...input} 
                    value={inputValue}
                    onChange={(value)=>{
                      input.onChange(value?.join(","))
                    }}
                    disabled={property.disabled} {...others} {...readonly}>
                    {optionData.map((option, index) => (
                      <Checkbox key={option[1] + index} value={option[1]}>{option[1]}</Checkbox>
                    ))}
                  </Checkbox.Group>;

  return <div ref={wrapperRef} style={{ maxWidth: width }}>{component}</div>;;
}
